<template>
	<view class="work_record">
		<navBar title="进度审核" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
		<view class="item-search">
			<u-search ref="search" class="search-input" placeholder="请输入关键字" @change="fnQuery" v-model="searchText" :showAction="false" :clearabled="false" @search="fnQuery"></u-search>
			<view class="item-right" @click="isShowSelect = true">
				<text>{{ leftText }}</text>
				<u-icon name="arrow-down" color="#2979ff" size="20"></u-icon>
			</view>
		</view>
		<u-picker :immediateChange="true" :show="isShowSelect" :columns="leftList" keyName="value" @cancel="isShowSelect = false"
			@confirm="fnSure"></u-picker>
		<scroll-view scroll-y="true" :style="{height:scrollHeight}" @scrolltolower="scrollBottom">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="recordList.length ==0"></u-empty>
			<view v-for="item in recordList" :key="item.id" style="padding: 20rpx;">
				<view  class="fill-record-item">
					<view class="title">
						<view class="title-text">{{ dictMap['construction_method'].find(it => it.code === item.constructionMethod).name || null}}</view>
						<view :class="item.reviewStatus === 'dsh' ? 'daishenhe': (item.reviewStatus === 'tg' ? 'tongguo' : (item.reviewStatus === 'wtg' ? 'weitongguo': ''))" class="title-label">
							<text>{{ item.reviewStatus === 'dsh' ? '待审核': (item.reviewStatus === 'tg' ? '通过' : (item.reviewStatus === 'wtg' ? '未通过': ''))}}</text>
						</view>
					</view>
					
					<view style="margin-top: 16upx; line-height: 28upx; font-size: 24upx; color: #6a819e; display: flex; align-items: center;">
						<u-icon name="clock" color="#6a819e" size="16"></u-icon>
						<text style="margin-left: 4upx;">提交时间：{{getDate2(item.recordCreateDate)}} | {{item.createUserName}}</text>
					</view>
					<view style="margin-top: 26upx; line-height: 28upx; font-size: 28upx; color: #53657C; display: flex; align-items: center;">
						<text style="margin-left: 4upx;">{{`${item.lineName}${item.branchLineName ? '(' + item.branchLineName + ')' : ''}`  || ""}}  {{item.lineSiteSectionName}}</text>
					</view>
					
					<view style="margin-top: 16upx; line-height: 28upx; font-size: 26upx; color: #6a819e; display: flex; align-items: center;">
						<text style="margin-left: 4upx;">施工日期：{{getDate(item.constructionDate)}}</text>
					</view>
					<view @click.stop="fnNavTo(item.id,item)" v-if="item.reviewStatus === 'dsh'" style="display: flex; align-items: center; justify-content: center; height: 96upx; background: #f5f7fa; border-radius: 4upx; margin: 20upx 0 0 0;">
						<image src="/static/image/shenhe.png" mode="aspectFill" style="width: 32upx; height: 32upx; margin-right: 10upx;"></image>
						<view style="color: #2F80ED; font-weight: bold;">审核</view>
					</view>
				</view>
			</view>
			<u-divider text="已加载全部数据" style="margin:0;" v-if="recordList.length >= total && recordList.length >0"></u-divider>
		</scroll-view>
	</view>
</template>

<script>
	import {
		pmProcessReportGetList
	} from '@/api/comprehensive/comprehensive.js'
	
import mixins from "@/utils/mixins.js"
import { mapGetters } from 'vuex'
	export default {		
		mixins: [mixins],
		  computed: {
		    ...mapGetters(['dictMap']),
			scrollHeight() {
				// #ifdef APP-PLUS  || H5 
					return `calc(100vh - 224rpx)`
				// #endif 
				// #ifdef MP-WEIXIN 
					return 'calc(100vh - 330rpx)'
				// #endif 
			}
		  },
		data() {
			return {
				searchText: '',
				isShowSelect: false,
				leftText: '待审核',
				leftTextStatus: 'dsh', //审核状态code
				leftList: [
					[{
							id: 'dsh',
							value: '待审核'
						},
						{
							id: 'tg',
							value: '审核通过'
						},
						{
							id: 'wtg',
							value: '审核未通过'
						},
						{
							id: null,
							value: '全部'
						},
					]
				],
				recordList: [], //审核列表
				pageNum:1,//分页页数
				total:0,//总的条数
				totalPage:0
				
			}
		},
		mounted() {
			// this.getDataList()
		},
		onShow() {
			//这里重置是因为返回后刷新列表防止数据拼接
			this.pageNum = 1
			this.recordList = []
			this.getDataList()
		},

		methods: {
			clickSelectProject() {

			},
			fnNavTo(id,item) {
				console.log(id,item,'详情页');
				uni.navigateTo({
					url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressReview/reviewDetail?id=${id}&dataType=${item.constructionMethod}`
				})
			},
			// 返回上一级
			goBack(url) {
				uni.switchTab({
					url: url
				})
			},
			fnQuery(val) {
				this.pageNum = 1
				this.recordList = []
				// this.searchText = val
				this.getDataList()
			},
			fnClear(val) {
				if(!val) {
					this.pageNum = 1
					this.recordList = []
					this.searchText = ''
					this.getDataList()
				}
				
			},
			fnSure(val) {
				this.leftText = val.value[0].value
				this.leftTextStatus = val.value[0].id
				this.recordList = []
				this.pageNum = 1
				this.getDataList()
				this.isShowSelect = false
			},
			scrollBottom(){
				this.pageNum++;
				if(this.totalPage >= this.pageNum)
					this.getDataList();
			},
			// 获取填报记录列表
			getDataList() {
				let resq = {
					currPage: this.pageNum,
					pageSize: 20,
					params: {
						reviewStatuss: this.leftTextStatus, // 审核状态（字典表-review_status）
						keyword: this.searchText, // 项目名称、线路、区间/站点、提交人
						isTemporary: 0, //暂存标识 null或不传：查询全部  只查询暂存的记录(1) 只查询非暂存的记录(0)
						projectId: uni.getStorageSync("isOwner")
					},
					projectId: uni.getStorageSync("isOwner")
				}
				pmProcessReportGetList(resq).then(res => {
					if (res.result.list.length > 0) {
						//搜索条件有值
						if(this.searchText !== '') {
							this.recordList = res.result.list
						}else {
							//否则拼接
							this.recordList = this.recordList.concat(res.result.list)
						}
					}else {
						
						this.recordList = res.result.list || []
					}
					this.total = res.result.total
					this.totalPage = res.result.totalPage
					if(this.pageNum >= this.totalPage) {
						this.pageNum = this.totalPage
					}
					console.log(res, '审核列表')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.work_record {
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		background-color: #f5f5f9;
	}
	.fill-record-item {
		background: #fff;
		border-radius: 20upx;
		padding: 30upx 26upx;
		
		.title {
			color: #445469;;
			font-weight: bold;
			display: flex;
			// justify-content: space-between;
			font-size: 32rpx;
			align-items: center;
			
			.title-text {
				margin-right: 20rpx;
				line-height: 40upx;
				max-width: 456upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.title-label {
				color: #fff;
				font-size: 28upx;
				width: 108upx;
				line-height: 34upx;
				position: relative;
				text-align: center;
				display: none;
				
				&::before {
					content: "";
					position: absolute;
					top: 0; right: 0; bottom: 0; left: 0;
					transform: skew(-15deg);
				}
				
				text {
					position: relative;
					line-height: inherit;
				}
			}
			
			.weitongguo {
				display: block;
				&::before {
					background: linear-gradient(90deg, #FF2B2B 0%, #FF5D3C 100%);
				}
			}
			.tongguo {
				display: block;
				&::before {
					background: linear-gradient(90deg, #19C585 0%, #61C9A5 100%);
				}
			}
			.daishenhe {
				display: block;
				&::before {
					 background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);
				}
			}
		}
	
		.image-list {
			display: flex;
			flex-wrap: wrap;
			margin: 32upx 0 14upx;
			
			image {
				width: 204upx;
				height: 174upx;
				margin-right: 10upx;
				margin-bottom: 10upx;
			}
		}
	}
</style>
